import { defineComponent, reactive, ref } from "vue";
import styles from "./safetyArchive.module.less";
import { imgPath } from "@/common/utils";
export default defineComponent({
  setup() {
    const stateNavs = ref([
      {
        text: '全部',
      },
      {
        text: '未开始',
      },
      {
        text: '进行中',
      },
      {
        text: '已完成',
      },
    ]);
    const stateNavsActived = ref(0);
    const clickState = (index: number) => {
      stateNavsActived.value = index
    }
    //状态
    const StateNavs = () => (
      <div class={styles.stateNavs}>
        <span>状态：</span>
        {
          stateNavs.value.map((item: any, index: number) => (
            <div class={styles['stateNavs-item']} onClick={() => { clickState(index) }}>
              <span class={[index === stateNavsActived.value && styles['actived']]}>{item.text}</span>
            </div>
          ))
        }
      </div>
    )

    const state = reactive({
      search: '',
      list: [],
    })
    const clickSearch = () => {

    }
    return () => (
      <div class={styles.safetyArchive}>
        <div class={styles['header-box']}>企业安全档案</div>
        <div class={styles['safetyArchive-content']}>
          <StateNavs />
          <div class={styles['search-box']}>
            <a-input style="width:28%;height:42px;" v-model:value={state.search} placeholder="任务名称" />
            <a-button class={styles.button} onClick={() => { clickSearch() }}>搜索</a-button>
          </div>
          <div class={styles['safetyArchive-list']}>
            {
              state.list.length === 0 ?
                <div class={styles['no-message']}>
                  <img src={imgPath('/home/no-message.jpg')} />
                </div> :
                <div>

                </div>
            }
          </div>
        </div>
      </div>
    )
  }
})